<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>Image 图片</title>
	<!-- <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" /> -->
	<link rel="stylesheet" href="../static/css/element2.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<!-- <script src="//unpkg.com/element-plus"></script> -->
	<script src="../static/js/element-plue2.js"></script>
	
	<script src="../static/js/icons-vue.js"></script>
	
	<link rel="stylesheet" href="../static/css/com.css">
<style type="text/css">
.demo-image .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  display: inline-block;
  width: 20%;
  box-sizing: border-box;
  vertical-align: top;
}
.demo-image .block:last-child {
  border-right: none;
}
.demo-image .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}

.demo-image__placeholder .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  display: inline-block;
  width: 49%;
  box-sizing: border-box;
  vertical-align: top;
}
.demo-image__placeholder .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
.demo-image__placeholder .el-image {
  padding: 0 5px;
  max-width: 300px;
  max-height: 200px;
}
.demo-image__placeholder.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: var(--el-fill-color-light);
  color: var(--el-text-color-secondary);
  font-size: 14px;
}
.demo-image__placeholder .dot {
  animation: dot 2s infinite steps(3, start);
  overflow: hidden;
}

.demo-image__error .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  display: inline-block;
  width: 49%;
  box-sizing: border-box;
  vertical-align: top;
}
.demo-image__error .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
.demo-image__error .el-image {
  padding: 0 5px;
  max-width: 300px;
  max-height: 200px;
  width: 100%;
  height: 200px;
}
.demo-image__error .image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: var(--el-fill-color-light);
  color: var(--el-text-color-secondary);
  font-size: 30px;
}
.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}

.demo-image__lazy {
  height: 400px;
  overflow-y: auto;
}
.demo-image__lazy .el-image {
  display: block;
  min-height: 200px;
  margin-bottom: 10px;
}
.demo-image__lazy .el-image:last-child {
  margin-bottom: 0;
}
</style>
</head>
<body>
<div id="app" class="">
	<el-divider content-position="left">基础用法</el-divider><!-- =============================================================== -->
	<p class="desc">可通过fit确定图片如何适应到容器框，同原生 object-fit。</p>
	<p class="desc">
		fill	默认，不保证保持原有的比例，内容拉伸填充整个内容容器。<br />
		contain	保持原有尺寸比例。内容被缩放。<br />
		cover	保持原有尺寸比例。但部分内容可能被剪切。<br />
		none	保留原有元素内容的长度和宽度，也就是说内容不会被重置。<br />
		scale-down	保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。
	</p>
	
	<div class="demo-image">
		<div class="block">
			<span class="demonstration">fill</span>
			<el-image style="width: 100px; height: 100px" :src="img_url" fit="fill" :preview-src-list="img_urls" hide-on-click-modal></el-image>
		</div>
		<div class="block">
			<span class="demonstration">contain</span>
			<el-image style="width: 100px; height: 100px" :src="img_url" fit="contain"></el-image>
		</div>
		<div class="block">
			<span class="demonstration">cover</span>
			<el-image style="width: 100px; height: 100px" :src="img_url" fit="cover"></el-image>
		</div>
		<div class="block">
			<span class="demonstration">none</span>
			<el-image style="width: 100px; height: 100px" :src="img_url" fit="none"></el-image>
		</div>
		<div class="block">
			<span class="demonstration">scale-down</span>
			<el-image style="width: 100px; height: 100px" :src="img_url" fit="scale-down"></el-image>
		</div>
	</div>
	<div class="demo-image">
		<div class="block">
			<span class="demonstration">scale-down</span>
			<el-image style="width: 100px; height: 100px" :src="img_src1" fit="scale-down" @click="showImg(img_src1)"></el-image>
		</div>
		<div class="block">
			<span class="demonstration">none</span>
			<el-image style="width: 100px; height: 100px" :src="img_url" fit="none" @click="showImg(img_url)"></el-image>
		</div>
		<div class="block">
			<span class="demonstration">contain</span>
			<el-image style="width: 100px; height: 100px" :src="src" fit="contain" @click="showImg(src)"></el-image>
		</div>
	</div>
	
	<el-divider content-position="left">占位内容</el-divider><!-- =============================================================== -->
	<p class="desc">可通过插槽 placeholder可自定义占位内容（当图像尚未加载时，自定义的占位符内容）</p>
	<div class="demo-image__placeholder">
		<div class="block">
			<span class="demonstration">Default</span>
			<el-image :src="src" @click="showImg(src)"></el-image>
		</div>
		<div class="block">
			<span class="demonstration">Custom</span>
			<el-image :src="src">
				<template #placeholder>
					<div class="image-slot">Loading<span class="dot">...</span></div>
				</template>
			</el-image>
		</div>
	</div>
	
	<el-divider content-position="left">加载失败</el-divider><!-- =============================================================== -->
	<p class="desc">可通过插槽 error可自定义加载失败内容</p>
	<div class="demo-image__error">
		<div class="block">
			<span class="demonstration">Default</span>
			<el-image ></el-image>
		</div>
		<div class="block">
			<span class="demonstration">Custom</span>
			<el-image src="abc.png" @error="loadError">
				<template #error>
					<div class="image-slot">
						<el-icon :size="60"><picture-filled></picture-filled></el-icon>
					</div>
				</template>
			</el-image>
		</div>
	</div>
	
	<el-divider content-position="left">懒加载</el-divider><!-- =============================================================== -->
	<p class="desc">可通过lazy开启懒加载功能， 当图片滚动到可视范围内才会加载。</p>
	<p class="desc">可通过 scroll-container 来设置滚动容器， 若未定义，则为最近一个 overflow 值为 auto 或 scroll 的父元素。</p>
	<div class="demo-image__lazy">
		<el-image v-for="url in urls" :key="url" :src="url" lazy></el-image>
	</div>
	
	<el-divider content-position="left">图片预览</el-divider><!-- =============================================================== -->
	<p class="desc">可通过 previewSrcList 开启预览大图的功能。 你可以通过 initial-index 初始化第一张预览图片的位置。 默认初始位置为 0。</p>
	<div class="demo-image__preview">
		<el-image style="width: 100px; height: 100px" :src="url" :preview-src-list="urls" :initial-index="4" fit="cover" hide-on-click-modal></el-image>
		<div style="display: inline-block;margin-right: 60px;"></div>
		<el-image style="width: 100px; height: 100px" :src="url" :preview-src-list="urls2" fit="cover" hide-on-click-modal></el-image>
	</div>
	<div class="demo-image">
		<div class="block">
			<span class="demonstration">scale-down</span>
			<el-image style="width: 100px; height: 100px" :src="img_src1" fit="scale-down" @click="showImg(img_src1)"></el-image>
		</div>
		<div class="block">
			<span class="demonstration">none</span>
			<el-image style="width: 100px; height: 100px" :src="img_url" fit="none" @click="showImg(img_url)"></el-image>
		</div>
		<div class="block">
			<span class="demonstration">contain</span>
			<el-image style="width: 100px; height: 100px" :src="src" fit="contain" @click="showImg(src)"></el-image>
		</div>
	</div>
	
	
	
	<el-dialog v-model="show_img" class="iframe" style="margin-bottom: 0px;" :width="img_width" top="8vh" title="查看大图，查看大图，查看大图，查看大图">
		<div class="layui-body" id="iframe_div" style="height:auto">
			<el-image  style="width: auto; height: auto;" :src="img_path" fit="full"></el-image>
		</div>
	</el-dialog>
</div>

</body>
<script>
const Main = {
	data() {
		return {
			img_src1: "../static/image/element-logo.png",
			show_img: false,
			img_width: 800,
			img_path: '',
			
			img_url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
			img_urls: ["https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"],
			src: "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
			url: "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
			urls: [
				'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
				'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
				'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
				'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
				'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
				'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
				'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
			],
			urls2: ["https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"],
		}
	},
	//实例挂载完成后被调用
	mounted(){
		this.$nextTick(function () {
			// 仅在整个视图都被渲染之后才会运行的代码
			
			
			
		})
	},
	methods:{
		fn(){
			this.message = "欢迎来到HTML中文网。";
		},
		//查看大图
		showImg(img_src){
			// img_src = "../static/image/element-logo.png";
			let img_width = 0;
			let imgObj = new Image();
			let pageW = document.documentElement.clientWidth;
			imgObj.src = img_src;
			if(imgObj.width > pageW){
				img_width = "100%";
			}else{
				img_width = imgObj.width;
			}
			if(Number(img_width) <= 400){
				img_width = 400;
			}
			
			this.show_img = true;
			this.img_width = img_width;
			this.img_path = img_src;
		},
		loadError(e){
			// console.log(e);
			console.log("loadError图片加载失败：" + e.target.currentSrc)
		},
		
	}
}

const app = Vue.createApp(Main);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)};
app.use(ElementPlus);
let vm = app.mount("#app");
</script>
</html>